<template>
  <div class="main">
    <input ref="fileInput" type="file" multiple hidden @input="selectFiles">
    <transition name="el-fade-in-linear">
      <div class="fileList">
        <div class="file" v-for="(file,index) in fileList" :key="index">
          <div class="filename">
            <el-icon>
              <list/>
            </el-icon>
            {{ file.name }}
          </div>
          <div class="file-icon">
            <el-icon class="is-loading" v-if="file.status==='uploading'">
              <loading/>
            </el-icon>
            <el-icon color="#43f543" style="margin-right: 10px" v-if="file.status==='finish'">
              <SuccessFilled/>
            </el-icon>
            <el-icon @click="removeFile(index)">
              <close/>
            </el-icon>
          </div>
        </div>
      </div>
    </transition>
    <div class="submit-wrapper">
      <el-icon class="choose-wrapper">
        <plus class="choose" @click="btnClick"/>
      </el-icon>
      <el-button class="submit" type="primary" @click="upload">
        上传
      </el-button>
    </div>
  </div>
</template>

<script lang="ts">
import {ref} from "vue";
import {MyFile} from "@/typings";
import {uploadFile} from "@/utils/oss";
import {defineComponent} from "vue";

export default defineComponent({
  props: {limit: {type: Number, default: 1}},
  setup(props) {
    let fileList = ref<MyFile[]>([])
    let fileInput = ref<InstanceType<typeof HTMLInputElement>>()
    const selectFiles = () => {
      let files = fileInput.value?.files
      if (files == null || files.length == 0) return;
      for (let key in files) {
        //不超过limit
        if (props.limit - fileList.value.length == 0) return;
        if (key == 'length' || key == 'item') continue
        fileList.value.push({name: files[key].name, status: 'ready', file: files[key], path: ''})
      }
    }
    const btnClick = () => {
      fileInput.value?.click()
    }
    const removeFile = (index: number) => {
      fileList.value.splice(index, 1)
    }
    const getUploadFiles = () => {
      return fileList.value.filter(value => value.path.length > 0)
    }
    const setFileList = (files: MyFile[]) => {
      fileList.value = []
      fileList.value.push(...files)
    }
    const setSingleFileUrl = (url: string) => {
      fileList.value = []
      if (url) {
        let strings = url.split("/");
        fileList.value.push({name: (strings.pop() as string), path: url, status: "finish"})
      }
    }
    const clearFiles = () => {
      fileList.value = []
    }
    const upload = async () => {
      let UnUploadFiles = fileList.value.filter(value => !value.path)
      for (let index = 0; index < UnUploadFiles.length; index++) {
        let file = UnUploadFiles[index];
        file.status = "uploading";
        let url = await uploadFile(file.file as File);
        console.log(url)
        file.status = "finish";
        file.path = url;
      }
    }
    return {
      upload,
      setFileList,
      getUploadFiles,
      removeFile,
      btnClick,
      selectFiles,
      setSingleFileUrl,
      clearFiles,
      fileInput,
      fileList
    }
  },
})
</script>

<style lang="scss" scoped>
.main {
  padding: 5px;
}

.fileList {

  .file {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .file-icon {
      flex-shrink: 0;
    }

    .filename {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 150px;
    }
  }


}

.choose-wrapper {
  width: 100px;
  height: 100px;
  color: #a1a0a0;
  margin-right: 20px;

  .choose {
    width: 100px;
    height: 100px;
    border: rgba(114, 207, 222, 0.5) 1px dashed;
  }
}

.submit-wrapper {
  margin-top: 20px;
  display: flex;
  align-items: flex-end;
}
</style>